<template>
		
		<view class="index" v-if="pageLoad">
		
				<scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft">
					<block v-for="(tab,index) in tabs" :key="tab.id">
						<view :class="['swiper-tab-list',currentTab==index ? 'on' : '']" :id="tab.id" :data-current="index" @tap="swichNav" >{{tab.typeName}}</view>
					</block>
				</scroll-view>
				<swiper :current="currentTab" class="swiper-box" duration="300" @change="bindChange">
					<block v-for="(tab,index1) in shows" :key="index1">
						<swiper-item>
							<scroll-view class="index-bd" scroll-y @scrolltolower="loadMore(index1)">
								<view v-show="index1==0">
									<view v-for="(show,index2)  in tab" :key="index2">
									<card :data="show" @click="onNavigator" @addPartyaddUpvote = "addUpvote"></card>
									</view>
								</view>
								
								<view class="product-list" v-show="index1==1"  >
									<view class="product-item" v-for="(product,index3)  in tab" :key="product.productId"  @click="goDetail(product.productId)">
										<product :data="product"></product>
									</view>
								</view>
							
							</scroll-view>
						</swiper-item>
					</block>
				</swiper>
				<view style="margin-top: 10;"></view>
		</view>
</template>

<script>
	import {getUrl} from '../../common/oss';
	import {getFavorites,addPartyUpvote} from '@/api/cms/page';
	import {getProductFavorites} from '@/api/mall/product'
	import card from '../../components/card.vue'
	import product from '../../components/product.vue'
import {
		mapGetters,mapState 
	} from 'vuex'
	export default {
		components: {
			card,
			product
		},
		data() {
			return {
				pageLoad:false, 
				showTypeId: '',
				title: "食色秀",
				tabs: [
					{
						id: "tab0",
						typeName: "帖子",
						orderBy:"createdStamp",
						sort: "desc",
						page: 1,
						params: {
						}
					},
					{
						id: "tab1",
						typeName: "商品",
						orderBy:"createdStamp",
						sort: "desc",
						page: 1,
						params: {}
					},
					
				],
				shows:[
					[],
					[],
					
				],
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		onLoad: function (e) {
			var that = this;
			this.loadData(0);
			this.loadData(1);
			this.pageLoad = true;
		},
		onUnload:function(){
			this.scrollLeft = 0,
			this.isClickChange = false,
			this.currentTab = 0;
		},
		methods: {
			addUpvote(e) {
				addPartyUpvote({partyId: this.userInfo.partyId, showId: e.id}).then(res => {
					console.log(JSON.stringify(res))
					if(res.status == 200 && res.rel == true) {
						
						var showIndex = this.shows.findIndex(item => {
							return item.showId==e.id 
						});
						console.log(JSON.stringify(this.shows[showIndex]))
						this.shows[showIndex].upvoteCount = this.shows[showIndex].upvoteCount+1;
						console.log(this.shows[showIndex].upvoteCount);
						uni.showToast({
							title:res.data,
							icon:"none"
						})
					} else if(res.status == 200 && res.rel == false){
						uni.showToast({
							title:res.data,
							icon:"none"
						})
					}
					console.log(JSON.stringify(res))
				});
			},
			onNavigator: function(e) {
				uni.navigateTo({
					url: e.url
				})
			},
			loadData: async function(index){
				var that = this;
// 				page(that.getParams(that.tabs[index].params,that.tabs[index].page, 
// 				4, that.tabs[index].orderBy, that.tabs[index].sort)).then(function(res){
// 					console.log(JSON.stringify(res))
// 					if(res.total > 0){
// 						for(var i = 0; i< res.data.length; i++){
// 							
// 							res.data[i].baseUrl = getUrl();
// 							that.shows[index].push(res.data[i]);
// 						}
// 						that.tabs[index].page = that.tabs[index].page + 1;
// 					}
// 				})
				this.tabs[index].params.partyId = this.userInfo.partyId;
				if(index == 0) {
					this.loadFavorite(index);
				} else {
					this.loadProduct(index)
				}
			},
			loadFavorite: function(index) {
				
				getFavorites(this.getParams(this.tabs[index].params,this.tabs[index].page, 
				4, this.tabs[index].orderBy, this.tabs[index].sort)).then(res =>{
					console.log(JSON.stringify(res))
					if(res.total > 0){
						for(var i = 0; i< res.data.length; i++){
							
							res.data[i].baseUrl = getUrl();
							this.shows[index].push(res.data[i]);
						}
						this.tabs[index].page = this.tabs[index].page + 1;
					}
				})
			},
			loadProduct: function(index) {
				getProductFavorites(this.getParams(this.tabs[index].params,this.tabs[index].page, 
				4, this.tabs[index].orderBy, this.tabs[index].sort)).then(res => {
					console.log(JSON.stringify(res))
					for(var i = 0; i< res.data.length; i++){
						
						//console.log(JSON.stringify(res[i]))
						res.data[i].baseUrl = getUrl();
						var prices = res.data[i].productPrices.sort(function(a, b) {
							return a.price > b.price
						})
						if (prices.length > 0) {
							res.data[i].maxPrice = prices[0].price;
							res.data[i].minPrice = prices[prices.length - 1].price;
							res.data[i].tip = "自营"
							this.shows[index].push(res.data[i]);
						}
					}
					this.tabs[index].page = this.tabs[index].page + 1;
				});
			},
			getParams: function(p, page, pageSize, orderBy, sort){
				let params = p || {};
				params.page=page;
				params.limit=pageSize;
				params.orderBy = orderBy;
				params.sort = sort;
				return params
			},
			bindChange: async function (e) {
				let index = e.target.current;
				if (this.isClickChange) {
					this.currentTab = index;
					this.isClickChange = false;
					return;
				}
				let tabBar = await this.getWidth("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;

				let width = 0;
				
				for (let i = 0; i < index; i++) {
					
					console.log(this.tabs[i].showTypeId)
					let result = await this.getWidth(this.tabs[i].id);
					width += result.width;
				}
				

				let winWidth = uni.getSystemInfoSync().windowWidth,
					nowElement = await this.getWidth(this.tabs[index].id),
					nowWidth = nowElement.width;

				if (width + nowWidth - tabBarScrollLeft > winWidth) {
					this.scrollLeft = width + nowWidth - winWidth;
				}
				if (width < tabBarScrollLeft) {
					this.scrollLeft = width;
				}
				this.isClickChange = false;
				this.currentTab = index; //一旦访问data就会出问题
			},
			getWidth: function (id) { //得到元素的宽高,
				console.log(id)
				return new Promise((res, rej) => {
					
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						if (id === 'tab-bar') {
							console.log("id=", id, "数据:", data)
						}
						res(data);
					}).exec();
				})
			},
			swichNav: async function (e) { //点击tab-bar,
			    console.log(e);
				if (this.currentTab === e.target.dataset.current) {
					console.log(false);

					return false;
				} else {
					console.log("new tab");
					let tabBar = await this.getWidth("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					
						console.log(tabBarScrollLeft);
					this.scrollLeft = tabBarScrollLeft;
					this.isClickChange = true;
					this.currentTab = e.target.dataset.current
				}
			},
			loadMore: function (e) {
				this.loadShows(e)
			},
		}	

	}
</script>

<style>

	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		width: 750upx;
		height: 100%;
	}
	
	.index-bd {
		width: 750upx;
		height: 100%;
	}

	.swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 64px;
		height: 64px;
	}

	.product-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
	}
	

	.swiper-tab-list {
		font-size: 30upx;
		width: 380upx;
		display: inline-block;
		text-align: center;
		color: #777777;
	}

	.on {
		color: #FF0000;
		border-bottom: 5px solid #FF0000;
	}

	.swiper-box {
		flex: 1;
		width: 100%;
		height: 100%;
	}

/* 	.swiper-box view {
		text-align: center;
	} */


	
</style>
